<template>
	<div class="component-item" :class="active?'selected':''" v-if="moduleData">
		<div class="flex center preview-item-top">
			<div class="del" @click.stop="delModule">
				<Icon type="ios-trash" size='22' style="color: white;" />
			</div>
		</div>
        <div class="component-content">
        	<div class="disFlex Flex-between">
	   			<div class="disFlex vertical">
	                <div class="component-title">{{moduleData.label_name_cn}}</div>
	                <div class="component-desc">{{moduleData.label_info_summary}}</div>
	            </div>
	            <div v-if="moduleData.data.more&&moduleData.data.more.display=='true'" class="more">查看更多</div>	
	   	    </div>
	   	    <div class="_goodsBList disFlex vertical" >
                <div class="_goodsT bgCover" :style="`background-image: url('${moduleData.data.image_url}');`">
					<div class="blur-bg"></div>
					<p>{{moduleData.data.title}}</p>
				</div>
                <div class="_lists" v-if="moduleData.data.sort == 0">
                    <div class="_li disFlex" v-for="(jtem,j) in moduleData.data.goods_list">
                        <div class="_img bgCover Flex" style="border-radius: 3px" :style="`background-image:url('${jtem.image_path}')`"></div>
                        <div class="_info disFlex vertical Flex-between" style="width:115px;">
                            <div class="_title lineClamp l_1">{{jtem.goods_title}}</div>
                            <div class="_desc lineClamp l_1">{{jtem.goods_summary}}</div>
                            <div class="_prices disFlex Flex-bottom">
                                <div class="_l" v-if="jtem.buy_mode=='2'">￥{{jtem.style[0].goods_group_money}}</div>
                                <div class="_l" v-else>￥{{jtem.style[0].price_quarter}}</div>
                                <div class="_r">￥{{jtem.style[0].price_market}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="_text" v-else style="text-align: center; padding: 24px; font-size: 18px; color: #333; font-weight: 700; background-color: #f8f8f8;">系统主动推荐</div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  	name: 'TalentModule',		
	props: {
		/**
	     * @description 起始值，即动画开始前显示的数值
	     */
	    moduleData: {
	      type: Object,
	      default: null
	    },
	    active: {
	    	type: Boolean,
	    	default: false
	    }
	},
    data () {
        return {
        	curpage: 0
    	}
    },
    methods: {
    	delModule() {
            this.$emit("delModule",this.moduleData);        
    	}
    },
    created() {
    },
    components: {
	}
 }
</script>

<style scoped>	

@import url("../baseModule.less");
.blur-bg {background: rgba(0, 0, 0, 0.2); position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
._goodsBList{box-shadow: 0px 0px 18px 1px rgba(0,0,0,.08);border-radius:7px;    padding-bottom: 12px;overflow:hidden;}
._goodsBList ._goodsT{width: 100%;height: 150px;background-color: #f8f8f8;margin-bottom: 12px;position: relative}
._goodsBList ._goodsT p { position: absolute; bottom: 10px; left: 15px; font-size: 14px; color: #f8f8f8; width: 88%; }
._goodsBList ._lists{padding: 0 12px;}
._goodsBList ._lists ._li{margin-bottom: 12px;}
._goodsBList ._lists ._li:last-child{margin-bottom: 0;}
._goodsBList ._lists ._li ._img{width: 75px;height: 90px;background-color: #f8f8f8;margin-right: 12px;}
._goodsBList ._lists ._li ._title{font-size: 16px;color: #333;font-weight: bold;}
._goodsBList ._lists ._li ._desc{font-size: 12px;color: #999;padding: 0;}
._goodsBList ._lists ._li ._prices ._l{font-size: 16px;color: #f00;font-weight: bold;}
._goodsBList ._lists ._li ._prices ._r{font-size: 12px;text-decoration: line-through;color: #e6e6e6;margin-left: 8px;line-height: 1.5;}
._text{color:#f8f8f8;position:relative;z-index:10;font-size:22px;width: 100%;padding: 0 24px;line-height: 1.3;text-align: center}
</style>
